<?php include '../header.php'; ?>
    <title>Kinet | Mi perfil</title>
    <script languaje="javascript" src="../js/cargaGeografica.js"></script>
    <link rel="stylesheet" href="../fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
    <script type="text/javascript" src="../fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
    <script type="text/javascript" src="../fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
    <link rel="stylesheet" type="text/css" href="../imgareaselect/css/imgareaselect-default.css" />
    <script type="text/javascript" src="../imgareaselect/scripts/jquery.imgareaselect.pack.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
    
    
    <script>
       
        $(window).load(function(){
            $('#videobook').fancybox({
                    openEffect  : 'none',
                    closeEffect : 'none',
                    helpers : {
                        media : {}
                    }
            });
            $(function() {
                $('#file-input').change(function(e) {
                    addImage(e); 
                });

                function addImage(e){
                    var file = e.target.files[0],
                    imageType = /image.*/;

                    if (!file.type.match(imageType))
                        return;

                        var reader = new FileReader();
                        reader.onload = fileOnload;
                        reader.readAsDataURL(file);
                    }

                    function fileOnload(e) {
                        var result=e.target.result;
                        $('#imgSalida').attr("src",result);
                    }
                });
                
                $('#cambiarImagen').on('shown.bs.modal', function (e) {
                    $('#imgSalida').imgAreaSelect({ x1: 120, y1: 120, x2: 280, y2: 280, aspectRatio: '4:4', handles: true,
                        onSelectEnd: function (img, selection) {
                            $('input[name="x1"]').val(selection.x1);
                            $('input[name="y1"]').val(selection.y1);
                            $('input[name="x2"]').val(selection.x2);
                            $('input[name="y2"]').val(selection.y2);   

                        }
                    });
                });
                
                $('#cambiarImagen').on('hide.bs.modal', function (e) {
                    $('#imgSalida').imgAreaSelect({ hide: true });
                });
                
                $('#cambiarImagen').modal(options);
                $('#cambioNombre').modal(options);
                $('#social').modal(options);
                $('#modificar').modal(options);
                $('#roles').modal(options);
                $('#contrasenya').modal(options);
                $('#cambiarImagen').modal(options);
                
                
         });    
    </script>
  </head>
  <body>
        <?php
        
            if(!isset($_POST['uid'])) {
                $_POST['uid'] = $_GET['uid'];
            }
            
            if ($_POST['uid'] == $_SESSION['uid']) {
                header ('Location:miPerfil.php');
            }
            
            include '../menus/menuUsuario.php';
            
            //obtenemos los datos del usuario del que queremos ver el perfil
            $datos = datosUsuario($_SESSION['uid']);
            $rolesTodos = obtenerRolesTodos();
            //ponemos el include después de la recogida de datos, porque necesitamos el nombre
            //del usuario para ponerlo en la pestaña
            
        ?>
        <div id="principal">
        <?php
            
            include 'pestanasMiPerfil.php';
        ?>
        <style>
            .tarjeta {
                float:none;
                margin:0 auto;
                height:auto;
                min-height:250px;
                width:930px;
                padding:10px;
                background-color:whitesmoke;
                /*border:silver solid 1px;*/
                margin-top:20px;
                position:relative;
            }
        </style>
        
        <!--<div class='tarjeta'>-->
            <?php
                include 'foto.php';
                include 'miInfoBasica.php';
                include 'social.php';
                include 'misRoles.php';
            ?>
            <div class="aspa" title="Dar de baja">
                <i class="glyphicon glyphicon-remove"></i>
            </div>
            <div style='clear:both'></div>
        <!--</div>-->
                
                
            <!--************************BOTONES***********************-->
            <style>
                .plano {
                    border-radius: 0;
                    width:150px;
                }
                
                .contenedorBotones {
                    float:left;
                    width:100%;
                    text-align:center;
                    height:30px;
                    margin-top:20px;
                }
                .kwicks {
                    width: 515px;
                    height: 100px;
                }
                .kwicks > li {
                    height: 100px;
                    /* overridden by kwicks but good for when JavaScript is disabled */
                    width: 125px;
                    margin-left: 5px;
                    float: left;
                }

                #panel-1 { background-color: #53b388; }
                #panel-2 { background-color: #5a69a9; }
                #panel-3 { background-color: #c26468; }
                #panel-4 { background-color: #bf7cc7; }
            </style>
            
            <div class='contenedorBotones'>
                <?php if ($datos['videobook'] != "") { ?>
                    <!--<a id="fancybox various iframe" class="btn btn-info plano" href="<?php // echo $datos['videobook'] ?>"><i class='glyphicon glyphicon-film'>&nbsp;</i>Videobook</a>-->
                    <a id="videobook" class="btn btn-info plano" href="<?php echo $datos['videobook'] ?>"><i class='glyphicon glyphicon-film'>&nbsp;</i>Videobook</a>
                <?php } ?>
                <a class="btn btn-info plano" href="#" data-toggle="modal" data-target="#modificar"><i class="glyphicon glyphicon-pencil"></i>&nbsp;Modificar</a>
                <a class="btn btn-info plano" href="#" data-toggle="modal" data-target="#roles"><i class="glyphicon glyphicon-wrench"></i>&nbsp;Roles</a>
                <a class="btn btn-info plano" href="#" data-toggle="modal" data-target="#social"><i class="glyphicon glyphicon-link"></i>&nbsp;Social</a>
                <a class="btn btn-info plano" href="#" data-toggle="modal" data-target="#contrasenya"><i class="glyphicon glyphicon-lock"></i>&nbsp;Contraseña</a>
                <a class="btn btn-info plano" href="../logic/verCurriculum.php"><i class="glyphicon glyphicon-paperclip"></i>&nbsp;Curriculum</a>
            </div>

            <div style='float:left;width:0px;height:0px'>
                <div style="float:left">
                    <form name="roles" action="" method="post">
                        <input name="uid" type="hidden" value="<?php $_SESSION['uid'] ?>">
                    </form>
                </div>
                <div style="float:left">
                    <form name="baja" action="" method="post">
                        <input name="uid" type="hidden" value="<?php $_SESSION['uid'] ?>">
                    </form>
                </div>
            </div>
            
            <div style="clear: both"></div>
            <!--</div>-->
            <br><br>
            <div style="clear: both"></div>
            
            <!--*********************** VENTANAS MODALES ***********************-->
            
            <!-- CAMBIO DE NOMBRE -->
            <?php include 'cambioNombre.php'; ?>
            
            <!-- REDES SOCIALES -->
            <?php include 'redesSociales.php'; ?>
            
            <!-- MODIFICAR PERFIL -->
            <?php include 'modificarPerfil.php'; ?>
            
            <!-- ROLES -->
            <?php include 'gestionarRoles.php'; ?>
            
            <!-- CAMBIAR CONTRASEÑA -->
            <?php include 'cambiarPass.php'; ?>
            
            <!--CAMBIAR IMAGEN -->
            <?php include 'cambiarImagen.php'; ?>
        <script>
           function comprobarPass() {
               if (document.pass.passN1.value != document.pass.passN2.value) {
                   document.getElementById("noCoinciden").style.visibility='visible';
                   return false;
               } else {
                   return true;
               }
           }
       </script>
        </div>
            <?php include '../footer.php' ?>
    </body>
</html>